<template>
	<view>
		<view class="classes-view">
			<classes-view @change="classChange"/>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="appTheme.checkColor"></u-tabs>

		<view v-if="current === 0 && category === 1">
			<template v-for="(item, index) in nurseryList">
				<nursery-item :course="item"></nursery-item>
			</template>
			<u-empty class="noContent" v-if="nurseryList.length === 0" text="暂时没有内容哦～"  mode="list"></u-empty>
		</view>
		
		<view v-if="current === 0 && category !== 1">
			<template v-for="(item, index) in todayList">
				<nursery-item :course="item" :category="category"></nursery-item>
			</template>
			<u-empty class="noContent" v-if="todayList.length === 0" text="暂时没有内容哦～"  mode="list"></u-empty>
		</view>
		<view v-else-if="current === 1">
			<template v-for="(item, index) in weekList">
				<nursery-item :course="item" :category="category"></nursery-item>
			</template>
			<u-empty class="noContent" v-if="weekList.length === 0" text="暂时没有内容哦～"  mode="list"></u-empty>
		</view>
		<view v-else-if="current === 2">
			<template v-for="(item, index) in nextWeekList">
				<nursery-item :course="item" :category="category"></nursery-item>
			</template>
			<u-empty class="noContent" v-if="nextWeekList.length === 0" text="暂时没有内容哦～"  mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	
	import { getCoursePlanList, getNurserySchedule } from '../../api/course.js'
	import CourseItem from './components/course-item.vue'
	import NurseryItem from './components/nursery-item.vue'
	import { mapState } from 'vuex';
	import appMixin from '@/mixins/app.js'
	import ClassesView from '@/components/classes-view.vue'
	export default {
		mixins: [appMixin],
		components: {
			CourseItem,
			ClassesView,
			NurseryItem
		},
		data() {
			return {
				list: [{
					name: '今日'
				}, {
					name: '本周'
				}, {
					name: '下周'
				}],
				current: 0,
				
				todayList: [],
				weekList: [],
				nextWeekList: [],
				nurseryList: [],
				
				classId: '',
				category: 1,
			}
		},
		computed: {
			...mapState({
				classList: state => state.user.classList,
			})
		},
		mounted() {

		},
		methods: {
			classChange(res) {
				console.log(res);
				this.classId = res.id;
				this.category = res.category;
				if (this.category === 1) {
					// 托班
					this.getNursery();
				} else {
					this.getCourse('today');
				}
				this.getCourse('week');
				this.getCourse('nextweek');
			},
			
			change(index) {
				this.current = index;
			},

			getCourse(queryType) {
				console.log(this.classId)
				console.log(queryType);
				getCoursePlanList(this.classId, queryType).then(res => {
					console.log(res);
					if (queryType === 'today') {
						this.todayList = res.data.content;
					} else if (queryType === 'week') {
						this.weekList = res.data.content;
					} else if (queryType === 'nextweek') {
						this.nextWeekList = res.data.content;
					}
				}).catch(error => {
					
				});
			},
			
			getNursery() {
				getNurserySchedule(this.classId, 'today').then(res => {
					console.log(res)
					this.nurseryList = res.data.content
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: $app-page-bg-color;
	}
	
	.classes-view{
		margin-left: 30rpx;
	}

	.course-item{
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	
</style>
